import React, { Component } from 'react';  //rce组件

// 引入组件 
import Header from './component/Header';
import Main from "./component/Main";
import Footer from "./component/Footer";

import axios from "./utils/axios"; //引入axios二次封装

export class App extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       list:[],
    }
  }

  componentDidMount() { //挂载完成后 -- 请求数据
    axios.get("/api/list").then( res => {
      this.setState({
        list: res.data,
      })
    })
  }

  // 1）添加 
  addFn = (value)=> { //子传父---value是来自子组件的数据
    let { list } = this.state; //解构
    list.push({ //添加最新事项
      "id":new Date().getTime(), //id 唯一的，一定要有
      "title":value, //子组件传递value
      "state":false,
    })
    console.log("list",list);

    // 重新给list赋值
    this.setState({
      list:list
    })
  }

  // 2）删除
  delFn(id) {
    let { list} = this.state;
    list = list.filter( item => {
      return item.id !== id; //filter过滤，把条件相等的留下来
    })

    // 重新赋值
    this.setState({
      list:list,
    })
  }

  // 3）点击复选框--复选框选中与不选中，改变文字状态 
  changeState(id) {
    let { list } = this.state;
    list.forEach( item => {
      if( item.id === id) {
        item.state = !item.state;
      }
    })

  //  重新赋值 
  this.setState({
    list:list
    // 1）解构赋值：生成新的数组，把老的数据，结构到新的里 
    // list:[...list]  如果出现了list改变但页面不更新的情况，可以解构赋值
    // 2）json转义（也叫序列化，浅拷贝 ）：通过转成字符串解决堆栈的问题，再parse转回成对象

    
  })
  }

  render() {
    const { list } = this.state; //解构
    return (
      <div className='App'>
        <Header></Header>
        <Main 
        list={ list }  //数据
        add={this.addFn}  //添加
        del={this.delFn.bind(this)} //删除
        change={this.changeState.bind(this)}
        color="yellow"
        ></Main>
        <Footer list={list}></Footer>
      </div>
    )
  }
}

export default App
